{# Form macros. Native inputs with ``name`` attributes, so every form posts
   or re-queries through htmx without client-side state.

       {% from "components/macros/form.html" import field, text_input, select, date_input, primary_button %}
#}


{% from "components/macros/icons.html" import icon %}

{%- set _primary_button_classes -%}
text-sm text-aegis-text border border-aegis-teal bg-aegis-teal/10 rounded px-4 py-2.5 hover:bg-aegis-teal/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2
{%- endset -%}


{# Inline primary button (no loading spinner). Defaults to ``type="button"``
   so it doesn't accidentally submit a form it's nested inside — pass
   ``type="submit"`` explicitly when you want submit semantics. ``attrs``
   lets the caller pass arbitrary attributes (Alpine ``@click``,
   ``:disabled``, ``aria-*``) without bloating the macro signature. #}
{% macro primary_button(label, type="button", attrs="") %}
<button type="{{ type }}" {{ attrs|safe }}
  class="{{ _primary_button_classes }}">{{ label }}</button>
{% endmacro %}


{# Primary submit button with an inline loading spinner. Parent scope must
   expose ``loading`` (bool) — typically flipped by ``@submit="loading = true"``
   on the form. The button disables itself while loading so a double-click
   can't double-submit. #}
{% macro submit_button(idle_label, loading_label) %}
<button type="submit" :disabled="loading"
  class="{{ _primary_button_classes }} w-full">
  <span x-show="!loading">{{ idle_label }}</span>
  <span x-show="loading" x-cloak class="inline-flex items-center gap-2">
    {{ icon("spinner", "animate-spin w-4 h-4") }}
    {{ loading_label }}
  </span>
</button>
{% endmacro %}


{# Shared input styling; every control below uses it so the bar reads as one. #}
{%- set _control_classes -%}
bg-aegis-bg border border-aegis-border rounded px-2.5 py-1.5 text-sm text-aegis-text placeholder:text-aegis-muted/50 focus:border-aegis-teal focus:outline-none transition-colors
{%- endset -%}


{# A native select. ``options`` are objects or dicts with ``id`` and
   ``name``, or, ``grouped``, ``{"label", "options"}`` groups of them (an
   optgroup each); ``blank`` is the "no filter" label (``None`` for no
   blank choice), chosen while nothing is; ``selected`` the current id.
   ``label`` wraps it inline for a filter bar; ``block`` lays it out
   full-width inside a ``field()``. #}
{% macro select(name, options, selected=None, blank="All", label=None, block=False, grouped=False) %}
{% if label %}<label class="inline-flex items-center gap-2 text-xs text-aegis-muted"><span>{{ label }}</span>{% endif %}
<select name="{{ name }}" class="{{ _control_classes }} select-caret pr-8{% if block %} block w-full mt-1{% endif %}">
  {% if blank is not none %}<option value="" {% if not selected %}selected{% endif %}>{{ blank }}</option>{% endif %}
  {% for group in (options if grouped else [{"label": none, "options": options}]) %}
  {% if group.label is not none %}<optgroup label="{{ group.label }}">{% endif %}
  {% for option in group.options %}
  {% set oid = option["id"] if option is mapping else option.id %}
  {% set oname = option["name"] if option is mapping else option.name %}
  <option value="{{ oid }}" {% if selected is not none and oid == selected %}selected{% endif %}>{{ oname }}</option>
  {% endfor %}
  {% if group.label is not none %}</optgroup>{% endif %}
  {% endfor %}
</select>
{% if label %}</label>{% endif %}
{% endmacro %}

{% macro date_input(name, value=None, label=None, block=False) %}
{% if label %}<label class="inline-flex items-center gap-2 text-xs text-aegis-muted"><span>{{ label }}</span>{% endif %}
<input type="date" name="{{ name }}" {% if value %}value="{{ value.isoformat() if value.isoformat is defined else value }}"{% endif %} class="{{ _control_classes }}{% if block %} block w-full mt-1{% endif %}">
{% if label %}</label>{% endif %}
{% endmacro %}

{% macro checkbox(name, checked=False, label=None, value=None) %}
<label class="inline-flex items-center gap-2 text-xs text-aegis-muted cursor-pointer">
  <input type="checkbox" name="{{ name }}" {% if value is not none %}value="{{ value }}"{% endif %} {% if checked %}checked{% endif %} class="accent-aegis-teal">
  {% if label %}<span>{{ label }}</span>{% endif %}
</label>
{% endmacro %}

{# A dropdown of checkboxes, posting ``name`` once per tick: a multi-pick
   filter. ``options`` are dicts with ``value``, ``label``, ``checked`` and
   an optional ``count``, and may carry their own ``name`` (a container under
   its service, ``indent``ed). Kept across the swaps of the form it sits in
   (``hx-preserve``, which needs the ``id``), so the menu stays open while
   several are ticked; a click anywhere else closes it. The button at its
   top ticks every option, or clears them when all are ticked, and the form
   refreshes as for any tick. #}
{% macro checklist(id, name, label, options) %}
{% set ticked = options|selectattr("checked")|list|length %}
<details id="{{ id }}" hx-preserve class="relative" @click.outside="$el.removeAttribute('open')"
         x-data="{ full: false, boxes() { return [...$root.querySelectorAll('input[type=checkbox]')] }, sync() { this.full = this.boxes().every((b) => b.checked) } }"
         x-init="sync()" x-on:change="sync()">
  <summary class="list-none cursor-pointer text-xs px-2.5 py-1 rounded border border-aegis-border text-aegis-muted hover:text-aegis-text">{{ label }}{% if ticked %}: {{ ticked }}{% endif %}</summary>
  <div class="absolute z-20 mt-1 w-64 max-h-80 overflow-y-auto rounded-lg border border-aegis-border bg-aegis-card shadow-xl p-2 space-y-0.5">
    <div class="flex items-center justify-between px-2 pb-1 mb-1 border-b border-aegis-border/60">
      <span class="text-xxs caps text-aegis-muted">{{ label }}</span>
      <button type="button" data-check-all class="p-1 rounded text-aegis-muted hover:text-aegis-text hover:bg-aegis-border/30"
              x-bind:title="full ? 'Clear all' : 'Select all'" x-bind:aria-label="full ? 'Clear all' : 'Select all'"
              x-on:click="const on = !full; boxes().forEach((b) => { b.checked = on }); sync(); $el.closest('form')?.dispatchEvent(new Event('change', { bubbles: true }))">
        <span x-show="!full">{{ icon("check", "w-3.5 h-3.5", 2) }}</span><span x-show="full" x-cloak>{{ icon("x-mark", "w-3.5 h-3.5", 2) }}</span>
      </button>
    </div>
    {% for o in options %}
    <label class="flex items-center gap-2 px-2 py-1 rounded text-sm hover:bg-aegis-border/30 cursor-pointer{% if o.indent %} pl-6 text-aegis-muted{% endif %}">
      <input type="checkbox" name="{{ o.name or name }}" value="{{ o.value }}" {% if o.checked %}checked{% endif %} class="checkbox checkbox-xs checkbox-primary">
      <span class="flex-1 truncate">{{ o.label }}</span>
      {% if o.count is defined %}<span class="text-xxs text-aegis-muted tabular-nums">{{ "{:,}".format(o.count) }}</span>{% endif %}
    </label>
    {% endfor %}
  </div>
</details>
{% endmacro %}

{# A search over what is already on the page: as you type it narrows
   ``target``'s rows to those holding the text and marks each match, with no
   request, and rows that arrive later follow it (app.js ``data-filter``).
   For a list the page holds whole (Logs); a list the server pages through
   searches there instead (``search_input``). Its ``name`` keeps the text in
   the URL, so a reload or another filter keeps it; the form that holds it
   leaves it out of its triggers (``change[!target.closest('[data-filter]')]``). #}
{% macro filter_input(target, name="q", value=None, placeholder="Filter") %}
<input type="search" name="{{ name }}" value="{{ value or '' }}" data-filter="{{ target }}" placeholder="{{ placeholder }}"
       aria-label="{{ placeholder }}" autocomplete="off" class="{{ _control_classes }} min-w-[12rem]">
{% endmacro %}

{# A stable id lets htmx restore focus when a search result replaces the form. #}
{% macro search_input(name, value=None, placeholder="Search", autofocus=False, attrs="") %}
<input type="search" id="search-{{ name }}" name="{{ name }}" value="{{ value or '' }}" placeholder="{{ placeholder }}"
       {% if autofocus %}autofocus{% endif %} {{ attrs|safe }}
       aria-label="{{ placeholder }}" class="{{ _control_classes }} min-w-[12rem]">
{% endmacro %}

{# A labelled field. The control comes via {% call %}; ``error`` renders
   under it (pattern 1's 422 re-render passes field errors here). #}
{% macro field(label, error=None) %}
<div class="space-y-1">
  <label class="block text-xxs text-aegis-muted caps">{{ label }}
    {{ caller() }}
  </label>
  {% if error %}<p class="text-xs text-error">{{ error }}</p>{% endif %}
</div>
{% endmacro %}

{% macro text_input(name, value=None, placeholder="", required=False, autofocus=False) %}
<input type="text" name="{{ name }}" value="{{ value or '' }}" placeholder="{{ placeholder }}"
       {% if required %}required{% endif %} {% if autofocus %}autofocus{% endif %}
       class="{{ _control_classes }} w-full mt-1">
{% endmacro %}

{% macro number_input(name, value=None, step=1, min=None, max=None, required=False) %}
<input type="number" name="{{ name }}" value="{{ value if value is not none else '' }}" step="{{ step }}"
       {% if min is not none %}min="{{ min }}"{% endif %} {% if max is not none %}max="{{ max }}"{% endif %} {% if required %}required{% endif %}
       class="{{ _control_classes }} w-full mt-1 tabular-nums">
{% endmacro %}

{% macro money_input(name, value=None, placeholder="0.00") %}
<div class="relative mt-1">
  <span class="absolute inset-y-0 left-2.5 flex items-center text-sm text-aegis-muted" aria-hidden="true">$</span>
  <input type="text" inputmode="decimal" name="{{ name }}" value="{{ value or '' }}" placeholder="{{ placeholder }}"
         class="{{ _control_classes }} w-full pl-6 tabular-nums">
</div>
{% endmacro %}

{% macro textarea(name, value=None, rows=6, placeholder="") %}
<textarea name="{{ name }}" rows="{{ rows }}" placeholder="{{ placeholder }}"
          class="{{ _control_classes }} w-full mt-1 font-mono text-xs">{{ value or "" }}</textarea>
{% endmacro %}


{# Themed combobox — replaces native <select> so the dropdown panel matches
   the dark UI instead of falling back to the OS-themed picker. Alpine
   handles open/close + click-outside + escape. Caller supplies:
   - `model`:        Alpine path to bind to (e.g. `form.metric_key`)
   - `options`:      Alpine expression returning an array of option objects
   - `value_attr`:   key on each option holding the bound value
   - `label_attr`:   key on each option holding the display label
   - `on_change`:    optional Alpine expression to run after selection
   - `placeholder`:  shown when no option matches the current model value
   - `small`:        tighter padding for inline filter chips
   - `name`:         posts the chosen value under this name, so the field
                     works inside a plain `<form>` and not only one that
                     submits by script

   ``grouped=true`` renders category headers: ``options`` is then a list of
   ``{label, items: [{value, label}]}`` groups (an empty group label means
   no header, useful to pin an "All" entry at the top). ``panel_class``
   widens the dropdown beyond the trigger (e.g. ``min-w-[13rem]``) so long
   labels don't wrap. #}
{% macro select_field(model, options, value_attr="value", label_attr="label", on_change="", placeholder="Select…", small=false, grouped=false, panel_class="", name=None) %}
<div x-data="{ open: false }" class="relative"
     @click.outside="open = false"
     @keydown.escape.window="open = false">
  {% if name %}<input type="hidden" name="{{ name }}" :value="{{ model }}">{% endif %}
  <button type="button" @click="open = !open"
    class="w-full bg-aegis-bg border rounded {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-2 text-sm' }} text-aegis-text text-left flex items-center justify-between gap-2 hover:border-aegis-muted focus:outline-none transition-colors"
    :class="open ? 'border-aegis-teal' : 'border-aegis-border'">
    {% if grouped %}
    <span class="truncate"
          x-text="(({{ options }}).flatMap(_g => _g.items).find(_o => _o.{{ value_attr }} === {{ model }}) || {}).{{ label_attr }} || '{{ placeholder }}'"></span>
    {% else %}
    <span class="truncate"
          x-text="(({{ options }}).find(_o => _o.{{ value_attr }} === {{ model }}) || {}).{{ label_attr }} || '{{ placeholder }}'"></span>
    {% endif %}
    <svg class="w-3 h-3 shrink-0 text-aegis-muted transition-transform"
         :class="open ? 'rotate-180' : ''"
         fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div x-show="open" x-cloak x-transition.opacity
       class="absolute left-0 top-full mt-1 z-30 bg-aegis-card border border-aegis-border rounded-lg shadow-lg py-1 max-h-80 overflow-y-auto {{ panel_class if panel_class else 'right-0' }}">
    {% if grouped %}
    <template x-for="_grp in {{ options }}" :key="_grp.label">
      <div>
        <div x-show="_grp.label"
             class="px-2 pt-2 pb-0.5 text-xxs caps text-aegis-muted/60"
             x-text="_grp.label"></div>
        <template x-for="_opt in _grp.items" :key="_opt.{{ value_attr }}">
          <button type="button"
            class="w-full text-left whitespace-nowrap {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-1.5 text-sm' }} hover:bg-aegis-border/30 transition-colors"
            :class="{{ model }} === _opt.{{ value_attr }} ? 'text-aegis-teal' : 'text-aegis-text'"
            @click="{{ model }} = _opt.{{ value_attr }}; open = false; {{ on_change }}"
            x-text="_opt.{{ label_attr }}"></button>
        </template>
      </div>
    </template>
    {% else %}
    <template x-for="_opt in {{ options }}" :key="_opt.{{ value_attr }}">
      <button type="button"
        class="w-full text-left {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-1.5 text-sm' }} hover:bg-aegis-border/30 transition-colors"
        :class="{{ model }} === _opt.{{ value_attr }} ? 'text-aegis-teal' : 'text-aegis-text'"
        @click="{{ model }} = _opt.{{ value_attr }}; open = false; {{ on_change }}"
        x-text="_opt.{{ label_attr }}"></button>
    </template>
    {% endif %}
  </div>
</div>
{% endmacro %}


{# Password input with a show/hide eye toggle. Standalone so callers can
   wire it up with either ``name=`` (plain form post) or Alpine
   ``x_model`` bindings.

   The toggle swaps the rendered ``type`` via ``:type`` so browser password
   managers still recognize the field as a password — Alpine's ``:type``
   takes effect after the initial parse, so autofill works.

   ``bg_class`` lets callers match the surrounding surface. #}
{% macro password_input(name=None, x_model=None, autocomplete=None, required=True, minlength=None, placeholder="", bg_class="bg-aegis-card") %}
<div class="relative" x-data="{ shown: false }">
  <input type="password" :type="shown ? 'text' : 'password'"
    {% if name %}name="{{ name }}"{% endif %}
    {% if x_model %}x-model="{{ x_model }}"{% endif %}
    {% if required %}required{% endif %}
    {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
    {% if minlength %}minlength="{{ minlength }}"{% endif %}
    class="w-full {{ bg_class }} border border-aegis-border rounded pl-3 pr-10 py-2 text-sm text-aegis-text placeholder:text-aegis-muted/40 focus:border-aegis-teal focus:outline-none transition-colors"
    placeholder="{{ placeholder }}">
  <button type="button" @click="shown = !shown"
    :aria-label="shown ? 'Hide password' : 'Show password'"
    class="absolute inset-y-0 right-0 px-3 flex items-center text-aegis-muted hover:text-aegis-text transition-colors">
    {# Eye / eye-slash from heroicons. Both 24×24 outline. Alpine swaps
       which is visible. #}
    <svg x-show="!shown" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
    </svg>
    <svg x-show="shown" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.243 4.243L9.88 9.88"/>
    </svg>
  </button>
</div>
{% endmacro %}


{# "OR" divider with hairlines — sits between a form and an alternate
   action (e.g. email/password above, OAuth buttons below). #}
{% macro or_divider() %}
<div class="flex items-center gap-3 my-5">
  <div class="flex-1 h-px bg-aegis-border/60"></div>
  <span class="text-xxs text-aegis-muted/70 caps">or</span>
  <div class="flex-1 h-px bg-aegis-border/60"></div>
</div>
{% endmacro %}


{# The time-window chips: a row of exclusive pills that submits as one
   radio field, so a click re-requests the enclosing form. Same recipe as
   ``layout.chip``, driven by ``peer-checked`` because a radio rather than
   a link marks the choice. ``ranges`` are ``(value, label)``, or
   ``(value, label, icon)`` for a chip that shows its icon (``icons.html``),
   its label on hover and to a reader. #}
{% macro range_chips(ranges, days, field="days", aria="Time window") %}
<fieldset class="flex flex-wrap items-center gap-1.5" aria-label="{{ aria }}">
  {% for choice in ranges %}
  {% set value, label = choice[0], choice[1] %}
  {% set glyph = choice[2] if choice|length > 2 else none %}
  <label class="cursor-pointer"{% if glyph %} title="{{ label }}"{% endif %}>
    <input type="radio" name="{{ field }}" value="{{ value }}" class="sr-only peer" {% if value == days %}checked{% endif %}>
    <span class="{{ 'inline-flex px-1.5' if glyph else 'inline-block px-2' }} text-xs py-0.5 rounded border border-aegis-border text-aegis-muted
                 peer-checked:border-aegis-teal peer-checked:text-aegis-text peer-checked:bg-aegis-teal/10 peer-checked:font-semibold
                 peer-focus-visible:ring-2 peer-focus-visible:ring-aegis-teal hover:border-aegis-muted hover:text-aegis-text transition-colors">
      {%- if glyph %}{{ icon(glyph) }}<span class="sr-only">{{ label }}</span>{% else %}{{ label }}{% endif -%}
    </span>
  </label>
  {% endfor %}
</fieldset>
{% endmacro %}


{# The time-window row that re-requests ``url`` when a chip is picked and
   swaps ``target`` (``hx_replace``), the choice kept in the address as
   ``field``. #}
{% macro range_form(ranges, current, url, target, field="days", aria="Time window", id=None, class="") %}
<form {% if id %}id="{{ id }}" {% endif %}class="{{ class }}" {{ hx_replace(url, target) }} hx-trigger="change">
  {{ range_chips(ranges, current, field=field, aria=aria) }}
</form>
{% endmacro %}


{# A small action button (row verbs, card verbs, toolbar). ``attrs`` is
   the htmx verb; ``vals`` a dict for ``hx-vals``; ``tone`` is default
   (quiet), primary (teal), danger or warn; ``glyph`` draws an icon in
   place of the label, which then names it for a reader and on hover (as
   the chips do). The one recipe every compact button uses. #}
{% macro action(label, attrs, tone="default", vals=None, glyph=None) %}
{% set tones = {"default": "border-aegis-border text-aegis-muted hover:text-aegis-text hover:border-aegis-muted", "primary": "border-aegis-teal text-aegis-text hover:bg-aegis-teal/10", "danger": "border-aegis-error/40 text-error hover:border-aegis-error", "warn": "border-aegis-amber/40 text-aegis-text hover:border-aegis-amber"} %}
<button type="button" {{ attrs|safe }} {% if vals is not none %}hx-vals='{{ vals|tojson }}'{% endif %} {% if glyph %}title="{{ label }}" {% endif %}class="action px-2.5 py-1 text-xs rounded border whitespace-nowrap transition-colors disabled:opacity-40 disabled:pointer-events-none {{ tones.get(tone, tones['default']) }}">{% if glyph %}{{ icon(glyph) }}<span class="sr-only">{{ label }}</span>{% else %}{{ label }}{% endif %}</button>
{% endmacro %}